<template>
    <div>
        <div class="table-header">
            <el-button type="primary" :icon="Plus" @click="showAddDialogHandler()">添加</el-button>
        </div>
        <el-table class="goods-table" border :data="goodsTypeData" v-loading="loadding" table-layout="auto">
            <el-table-column prop="id" label="编号" align="center"></el-table-column>
            <el-table-column prop="name" label="食品分类名称" align="center"></el-table-column>
        </el-table>
        <div class="pagination-container">
            <Pagination
                layout="prev, pager, next"
                :total="PaginationConfig.total"
                :page-size="PaginationConfig.pageSize"
                :page-num="PaginationConfig.pageNum"
                @pagination="UpdatePage"></Pagination>
        </div>
        <BaseFormDialog title="新增食品分类" :visible="addDialogVisable"
                        @SureFormDialog="addGoodsTypeHandler(ruleFormRef)"
                        @CancelFormDialog="CancelFormDialogHandler"
            >
            <template #FormContent>
                <el-form ref="ruleFormRef"
                         lass="login-form"
                         autocomplete="on"
                         :model="addGoodsTypeData"
                         :rules="addGoodsTypeRules"
                         label-position="top" status-icon>
                    <el-form-item label="食品类别" prop="typeName">
                        <el-input placeholder="请输入用户名" v-model="addGoodsTypeData.typeName" name="typeName"
                                  type="text"/>
                    </el-form-item>
                </el-form>
            </template>
        </BaseFormDialog>
    </div>
</template>
<script setup>
import {Delete, Edit, Plus} from "@element-plus/icons-vue";
import Pagination from "@/components/Pagination/index.vue";
import {onMounted, reactive, ref} from "vue";
import {getGoods, addGoodsType, getGoodsType} from "@/api/Goods";
import BaseFormDialog from '@/components/BaseFormDialog/Index.vue'
import store from "@/store/Index";
import {ElMessage} from "element-plus";
import {addGoodsTypeRules} from '@/rules/GoodsTypeRules'

const ruleFormRef = ref(null);

const loadding = ref(true);
const addDialogVisable = ref(false);
const goodsTypeData = ref([]);
const PaginationConfig = reactive({
    pageNum: 1,
    pageSize: 4,
    total: 0
})

const addGoodsTypeData = reactive({
    typeName: '',
    businessesId: store.getters["business/getUserInfo"].id,
})
onMounted(() => {
    GetGoodsTypeListHandler();
})
function showAddDialogHandler() {
    if (addDialogVisable.value){
        addDialogVisable.value = false;
    }else {
        addDialogVisable.value = true;
    }
}
async function addGoodsTypeHandler(formEl) {
    if (!formEl) return
    await formEl.validate(async (valid, fields) => {
            if (valid) {
                addGoodsType({
                    name: addGoodsTypeData.typeName,
                    businessesId: addGoodsTypeData.businessesId
                }).then((response) => {
                    ElMessage({
                        message: '添加成功',
                        type: 'success',
                        duration: 1000
                    })
                    GetGoodsTypeListHandler();
                })
            } else {
                ElMessage({
                    message: '请完成所有必填字段',
                    type: 'warning',
                    duration: 5 * 1000
                })
            }
        }
    )

}

function GetGoodsTypeListHandler() {
    getGoodsType(store.getters["business/getUserInfo"].id).then((response) => {
        goodsTypeData.value = response.rows;
        PaginationConfig.total = response.total;
        loadding.value = false;
    })


}

function UpdatePage(args) {
    loadding.value = true
    PaginationConfig.pageNum = args.page;
    GetGoodsTypeListHandler();
}

function CancelFormDialogHandler() {
    addDialogVisable.value = false;
}
</script>

<style scoped>
.table-header {
    display: flex;
    justify-content: right;
    padding-bottom: 20px;
}

.pagination-container {
    padding: 20px;
    display: flex;
    justify-content: center;
}

.goods-table {
    justify-content: center;
}
</style>